/*
 * @Author: viivLgr 
 * @Date: 2018-06-04 17:01:42 
 * @Last Modified by: viivLgr
 * @Last Modified time: 2018-06-07 16:19:58
 */
import React from 'react';

// 通用的列表
class TableList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isFirstLoading: true
        }
    }
    componentWillReceiveProps(){
        // 列表只有在第一次挂在的时候，isFirstLoading为true
        this.setState({
            isFirstLoading: false
        })
    }
    render() {
        // 表头信息
        let tableHeader = this.props.tableHeaders.map((item, index) => {
            if(typeof item === 'object'){
                return <th key={index} width={item.width}>{item.name}</th>;
            }else if(typeof item === 'string'){
                return <th key={index}>{item}</th>;
            }
        });
        // 列表内容
        let listBody = this.props.children;
        let listInfo = (
            <tr>
                <td colSpan={this.props.tableHeaders.length} className="text-center">
                    {this.state.isFirstLoading ? '正在加载数据' : '没有找到相应的结果~'}
                </td>
            </tr>
        );
        let tableBody = listBody.length > 0 ? listBody : listInfo;
        return (
            <div className="row">
                <div className="col-md-12">
                    <table className="table table-striped table-bordered">
                        <thead>
                            <tr>{tableHeader}</tr>
                        </thead>
                        <tbody>{tableBody}</tbody>
                    </table>
                </div>
            </div>
        )
    }
}

export default TableList;